<template>
  <div class="sx-board-box h-full">
    <Mod1
      v-for="(item, index) in list"
      :nid="`id_${index}`"
      :title="item.typeName"
      :num="item.QTY"
      :bottomNumShow="item.SKU_QTY !== 0 ? true : false"
      :bottomNum="item.SKU_QTY"
    ></Mod1>
  </div>
</template>
<script>
  import { defineComponent, ref, onUnmounted, onMounted } from 'vue'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import Mod1 from './mod/mod1.vue'
  export default defineComponent({
    name: 'UiSanxiaModel1',
    components: { Mod1 },
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    setup() {
      const types = {
        RCV: '入库订单数',
        SO: '出库订单数',
        INV: '当前库存数',
        SKU: '在库SKU数',
      }
      const list = ref([])
      const method = 'wms.kanban.analyze.statistics.query'
      const init = () => {
        request({
          url: GFCD('dams', 'domain') + '/wms/wms-web',
          method: 'post',
          data: {
            data: JSON.stringify({ '#LIMIT#': '1', '#PAGE_SIZE#': '10' }),
            method,
          },
        }).then((res) => {
          const _data = res.data[method].data
          if (_data) {
            list.value = _data.map((v) => {
              v.typeName = types[v.TYPE.split('-')[1]]
              return v
            })
          }
        })
      }
      let time = null
      onMounted(() => {
        init()
        // 最后开启
        time = setInterval(() => {
          init()
        }, 1000 * 5)
      })
      onUnmounted(() => {
        clearInterval(time)
      })
      return { list }
    },
  })
</script>

<style lang="scss">
  .sx-board-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 0;
  }
  .uiSwiper_vofek9 {
    .table-header-bolck {
      margin: 10px 0;
    }
    .t-header-box {
      position: absolute;
      top: -5px;
      height: 2px;
      background-color: #263a7f;
      width: 100%;
      z-index: 4;
    }
    .t-header-box::after {
      content: ' ';
      position: absolute;
      width: 15px;
      height: 4px;
      background-color: #4badf6;
      top: -1px;
      left: 0;
    }
    .t-header-box::before {
      content: ' ';
      position: absolute;
      width: 15px;
      height: 4px;
      background-color: #4badf6;
      top: -1px;
      right: 0;
    }
    .t-bottom-box {
      position: absolute;
      bottom: -5px;
      height: 2px;
      background-color: #263a7f;
      width: 100%;
      z-index: 4;
    }
    .t-bottom-box::after {
      content: ' ';
      position: absolute;
      width: 15px;
      height: 4px;
      background-color: #4badf6;
      top: -1px;
      left: 0;
    }
    .t-bottom-box::before {
      content: ' ';
      position: absolute;
      width: 15px;
      height: 4px;
      background-color: #4badf6;
      top: -1px;
      right: 0;
    }
  }
</style>
